<section class="itq-container">
    <aside class="q-sidebar">
        <section class="q-nav-left">
            <ul class="list-item">
                <li class="list-item"><a href="#"><figure><img src="images/icon-nav-01.png"><figcaption>Danh mục sản phẩm</figcaption></figure></a>
                    <ul class="sub-list-item">
                        <?php foreach ($listleftcategory as $key=> $value) {?>
                            <li class="sub-list-item"><img src="images/icon-list-nav-01.png"><a href="#"><?php echo $value->category_name?></a></li>
                        <?php }?>
                    </ul><!--.sub-list-item-->
                </li>
            </ul><!--.list-item-->
        </section>
        <!--q-nav-left-->
        <section class="q-nav-left"">
        <label class="q-label">
            <h4 class="white-bold-15"><i class="glyphicon glyphicon-film"></i> Video Sản phẩm </h4>
        </label>
        <section class="q-video">
            <iframe width="240" height="200" src="//www.youtube.com/embed/V46aPEWgqmY" frameborder="0" allowfullscreen></iframe>
        </section>
</section>
<!--q-video-left-->
<section class="q-new-left">
    <label class="q-label">
        <h4 class="white-bold-15"><i class="glyphicon glyphicon-list-alt"></i> Tin Tức Nổi Bật </h4>
    </label>
    <ul class="q-news">
        <li class="news-item">
            <figure>
                <img src="images/product-03.png">
                <a href="#" class="back-12-b">Món quà ? ngh?a t? ngư?i thân</a>
            </figure>
        </li>
    </ul>
</section>
<!--q-new-left-->
<section class="q-sosial-left">
    <label class="q-label">
        <h4 class="white-bold-15"><i class="glyphicon glyphicon-list-alt"></i> FanPage </h4>
    </label>
    <section class="q-sosial">
        <iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&amp;width=200&amp;layout=standard&amp;action=like&amp;show_faces=true&amp;share=true&amp;height=80&amp;appId=857911027553541" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:200px; padding-top: 10px" allowTransparency="true"></iframe>
    </section>
</section>
<section class="q-statistics-left">
    <label class="q-label">
        <h4 class="white-bold-15"><i class="glyphicon glyphicon-list-alt"></i> FanPage </h4>
    </label>
    <section class="q-static">
        <table>
            <tr>
                <td class="cls1"><strong> Đang online: </strong></td>
                <td class="cls2"> <p>10</p></td>
            </tr>
            <tr>
                <td class="cls1"><strong> Đang online: </strong></td>
                <td class="cls2"> <p>10</p></td>
            </tr>
            <tr>
                <td class="cls1"><strong> Đang online: </strong></td>
                <td class="cls2"> <p>10</p></td>
            </tr>
        </table>
    </section>
</section>
<!--q-statistics-left-->
</aside>
<script>
    $(function(){
        var menu_ul = $('ul.list-item li.list-item ul.sub-list-item');
        var menu_a = $('ul.list-item li.list-item a ');
        menu_ul.hide();
        menu_a.click(function(e){
            e.preventDefault();
            if(!$(this).hasClass('active')){
                menu_a.removeClass('active');
                menu_ul.filter(':visible').slideUp('slow');
                $(this).addClass('active').next().stop(true,true).slideDown('slow');
            }else{
                $(this).removeClass('active');
                $(this).next().stop(true,true).slideUp('slow');
            }
        })
    });
</script>
<!--end-aside-->
<!--q-content-->
<section class="q-content">
    <header class="q-header">
        <figure><img src="images/logo-footer.png"><figure>
    </header>
    <section class="clear"></section>
    <!--container-header-->
    <section class="q-detail-product">
        <section class="q-slide">
            <ul id="etalage">
                <?php
                    foreach($images as $key => $value){
                ?>
                <li>
                    <a href="optionallink.html">
                        <img class="etalage_thumb_image" src="<?php echo $value->destination?>" />
                        <img class="etalage_source_image" src="<?php echo $value->destination?>" title="This is an optional description." />
                    </a>
                </li>
                <?php } ?>
            </ul>
            <script>
                jQuery(document).ready(function($){

                    $('#etalage').etalage({
                        thumb_image_width: 400,
                        thumb_image_height: 300,
                        source_image_width: 900,
                        source_image_height: 1200,
                        show_hint: true,
                        click_callback: function(image_anchor, instance_id){
                            alert('Callback example:\nYou clicked on an image with the anchor: "'+image_anchor+'"\n(in Etalage instance: "'+instance_id+'")');
                        }
                    });
                    // This is for the dropdown list example:
                    $('.dropdownlist').change(function(){
                        etalage_show( $(this).find('option:selected').attr('class') );
                    });

                });
            </script>
        </section>
        <section class="q-cost-product">
            <table id="hor-minimalist-b" style="margin: 0px 0 0px 0;">

                <tbody>
                <tr>
                    <td style="width: 120px;">Chuyên mục: </td><td class="col_right"><strong><a href="<?php echo Yii::app()->createUrl('home/listsameproduct',array('id'=>$item->category_id))?>"><?php echo Category::GetMenu($item->category_id)?></a></strong></td>
                </tr>
                <tr>
                    <td style="width: 120px;">Tên Sản phẩm: </td><td class="col_right"><strong><?php echo $item->name;?></strong></td>
                </tr>
                <tr>
                    <td>Trạng thái: </td>
                    <td class="col_right">Thông thường</td>
                </tr>
                <tr>
                    <td>Giá thị trường: </td>
                    <td class="col_right"><span style="text-decoration: line-through;"><?php echo $item->oldcost?></span></td>
                </tr>
                <tr>
                    <td>Xuất sứ: </td>
                    <td class="col_right" style="color: #FFF474;font-weight: bold;"><?php echo $item->type_id?></td>
                </tr>
                <tr>
                    <td>Giá bán: </td>
                    <td class="col_right" style="color: #FFF474;font-weight: bold;"><?php echo $item->cost?></td>
                </tr>
                <tr>
                    <td>Tư vấn trực tuyến: </td>
                    <td><a href="ymsgr:SendIM?nguyen.cuong2391"><img border="0" align="absmiddle" src="http://opi.yahoo.com/online?u=nguyen.cuong2391&amp;m=g&amp;t=2"></a></td>
                </tr>
                </tbody>
            </table>
            <?php

            ?>
        </section>
        <section class="clear"></section>
        <section id = "second-sidebar" class="q-info-product">
            <ul class="tabs">
                <li class="active"><a href ="#articles-product" class="active" >Bài viết chi tiết sản phẩm</a></li>
                <li class=""><a href ="#same">Sản phẩm cùng loại</a></li>
                <li class=""><a href ="#popular">sản phẩm cùng xuất sứ</a></li>
                <section class="clear"></section>
            </ul>
            <div class="tab-container">
                <div id ="articles-product" class="tab-content">
                    <section>
                        <?php echo $item->info; ?>
                    </section>
                </div>
                <div id ="same" class="tab-content">
                    <ul class="q-product">
                        <?php foreach($sameproduct as $key=>$value){


                        ?>
                        <li class="q-product">
                            <figure>
                                <img src="<?php echo $value->images?>">
                                <a href="/qua-tang/index.php?r=home/buyproduct&amp;id=4" class="q-buy">Mua</a>
                                <a href="/qua-tang/index.php?r=home/detailproduct&amp;id=4" class="q-view">Xem</a>
                            </figure>
                            <figcaption class="row1">móc chìa khóa</figcaption>
                            <figcaption class="row2"><span class="cost"> Giá : 25000 VNĐ</span><strike>Giá Cũ:  100000VNĐ</strike></figcaption>
                        </li>
                        <?php }?>
                        <section class="clear"></section>
                    </ul>
                </div>
                <div id ="popular" class="tab-content">
                    <ul class="q-product">
                        <?php foreach($sametype as $key=>$value){


                            ?>
                            <li class="q-product">
                                <figure>
                                    <img src="<?php echo $value->images?>">
                                    <a href="/qua-tang/index.php?r=home/buyproduct&amp;id=4" class="q-buy">Mua</a>
                                    <a href="/qua-tang/index.php?r=home/detailproduct&amp;id=4" class="q-view">Xem</a>
                                </figure>
                                <figcaption class="row1">móc chìa khóa</figcaption>
                                <figcaption class="row2"><span class="cost"> Giá : 25000 VNĐ</span><strike>Giá Cũ:  100000VNĐ</strike></figcaption>
                            </li>
                        <?php }?>
                        <section class="clear"></section>
                    </ul>
                </div>
            </div>
        </section>
        <script>
            $(document).ready(function(){
                $('.tab-content:not(:first)').hide();
                $('.tabs li a').click(function(){
                    $('.tabs li a').removeClass('active');
                    $('.tabs li').removeClass('active');
                    $(this).addClass('active');
                    $(this).parent().addClass('active');
                    $('.tab-content').hide();

                    var activeTab = $(this).attr('href');
                    $(activeTab).show();
                    return false;
                })
            })
        </script>
    </section>
    <!--q-detail-product-->


</section>
<!--content-->
<section class="clear"></section>
</section>